// 要实现通过scale(缩放的)适配方案
/* 
  1.当前设备的宽高比 等于小于 设计稿的宽高比  根据两者之间的宽度比进行缩放
  2.当前设备的宽高比 大于 设计稿的宽高比  根据两者之前的高度比进行缩放
*/
import _ from 'lodash'
import { onMounted,onUnmounted } from "vue"
export default function useScreenAdapt(dWidth:number = 1920,dHeight:number = 1080){

  // 使用节流提高性能
  const throttleAdjustZoom =  _.throttle(()=>{
    AdjustZoom()
  },1000)

  // 在挂载阶段需要监听resize事件
  onMounted(()=>{
    AdjustZoom()
    window.addEventListener('resize',throttleAdjustZoom)
  })
  

  // 在卸载阶段需要移出监听事件
  onUnmounted(()=>{
    window.removeEventListener('resize',throttleAdjustZoom)
  })

  function AdjustZoom(){
    // console.log(1111)
    // 获取当前设计稿的宽度和高度
    let designWidth = dWidth
    let designHeight = dHeight
    // 设计稿的宽高比
    let designRatio = designWidth / designHeight

    // 获取当前设备的宽度和高度
    let deviceWidth = document.documentElement.clientWidth
    let deviceHeight = document.documentElement.clientHeight
    // 设备的宽高比
    let deviceRatio = deviceWidth / deviceHeight

    // 假设缩放比默认是1
    let scaleRatio = 1

    if(deviceRatio <= designRatio){
      scaleRatio = deviceWidth / designWidth 
    } else if(deviceRatio > designRatio){
      scaleRatio = deviceHeight / designHeight 
    }

    // 整个echarts图表居中,使用也是位移
    document.body.style.transform = `scale(${scaleRatio}) translate(-50%,0)`
  }

  

}